Blog

L’excellence technique e-commerce avec Front-Commerce

Nous concevons depuis la création de la société (2006) des boutiques en ligne. Depuis 2012, nous nous sommes concentrés sur la solution « Magento » qui offre des capacités intéressantes (richesse fonctionnelle, volumétrie de catalogue et de commandes). Nous y avons trouvé à l’époque une architecture de code compatible avec notre vision d’un développement qualitatif (surcharges, déploiement, communauté).

Depuis 2018 avec la maturité de Magento 2, nous avons été les premiers intégrateurs de la solution française Front-Commerce. C’était à l’époque la première solution « frontend » qui proposait d’afficher les écrans visiteurs à la place de Magento 2, permettant ainsi de meilleures performances, une meilleure ergonomie et une grande facilitation de développement pour l’intégrateur (nous) donc des coûts réduits pour l’e-commerçant.

Près de 4 ans plus tard, voici un bilan de notre usage de Front-Commerce, et en quoi les boutiques que nous livrons sont techniquement au top de ce qu’on peut attendre.

Une architecture évolutive basée sur le « headless »

Une boutique en ligne, aujourd’hui, est le reflet de plusieurs services sous-jacents visibles ou invisibles à l’acheteur et qui rendent son parcours d’achat possible : catalogue produit, stock, avis clients, paiements, transporteurs, CRM, gestionnaire de contenu, etc…

Dans « le monde d’avant », tous ces services étaient synchronisés dans le moteur e-commerce pour qu’il puisse afficher les données aux visiteurs, même celles dont il n’a pas besoin pour fonctionner, une architecture dite « monolithique ».
Résultat : un logiciel unique, énorme car bourré de dépendances à d’autres services et avec une base de données gargantuesque, qui devient bien souvent lent, mais aussi fragile en termes d’évolution tant les effets de bord sont nombreux entre toutes ces dépendances. Résultat : une boutique lente pour les acheteurs, et complexe à faire évoluer pour les développeurs.

Ce que Magento 2 a permis, et qui est aussi et maintenant un véritable mouvement global pour les applications web, c’est la compatibilité avec les webservices (API). En effet, Magento 2 offre une API qui permet de faire toutes les actions qu’un utilisateur peut faire sur le site : naviguer entre les pages, créer un compte, ajouter un produit au panier, passer une commande, etc… Quand un logiciel permet cela, il est dit « headless » (« sans tête » : il n’y a pas de frontend, d’écrans visiteurs). L’architecture qui en résulte est dite « découplée ».

Source Front-Commerce

Et c’est là que Front-Commerce s’est engouffré : fournir le fameux frontend qui interagit avec le Magento 2 « headless ». Du coup, dans certains cas de figure, il n’y a plus besoin de synchroniser des services sous-jacents à Magento puisque ce n’est plus lui qui affiche les pages aux visiteurs. On peut demander à Front-Commerce d’aller chercher ces infos directement à la source, en parallèle des informations échangées avec Magento 2.

Exemples :

  • J’interroge directement mon WMS (logiciel de gestion de stock) pour connaître le stock de chaque article, en temps réel, sur chaque fiche produit et à la validation de commande.
  • je gère ma rubrique « actualités / blog » avec un WordPress, fait pour cela et lui aussi « headless ».
  • je vais chercher les informations produits (description, photos) dans mon PIM (gestionnaire de catalogue)
  • je récupère les avis clients une fois par jour et les mets en cache, plutôt que d’appeler un widget tiers pas forcément rapide à afficher sur chaque page
  • quand un client se connecte, mon CRM me dit en temps réel à quel segment il appartient pour lui afficher des mises en avant produit et des tarifs personnalisés
  • etc…

Ainsi, on peut confier à un logiciel spécialisé chaque fonctionnalité de son business e-commerce (« best of breed »), et ceci de manière évolutive (ex : la gestion du stock peut être déplacée de Magento au WMS lors d’une mise à jour), sans aucun impact sur l’affichage des écrans visiteurs. La modularité et les évolutions de la boutique sont donc grandement facilitées. Il est même possible de remplacer le moteur e-commerce en cours de route. Front-Commerce étant compatible Magento 1 et Magento 2, certains clients sont passés sur Front-Commerce avec leur Magento 1 pour avoir très rapidement une nouvelle expérience d’achat optimisée, puis ont remplacé petit à petit les services sous-jacents jusqu’à passer à Magento 2. Le thème Front-Commerce a pu être conservé sans grands changements.

Grâce au découplage, Front-Commerce assure un rôle de cache qui permet de décharger le moteur e-commerce. Celui-ci sera moins sollicité, et n’aura qu’à échanger des appels API plutôt que de générer des écrans entiers à chaque page vue. Il en résulte une baisse de la charge serveur et potentiellement des économies sur l’hébergement.

Sur ce point, l’intérêt pour le e-commerçant est d’avoir une boutique qu’il sera plus facile de faire évoluer dans le temps, et donc à moindre coût (TCO).

Les performances, ce Graal qui compte énormément

Si Front-Commerce a décidé d’offrir une alternative aux écrans natifs de Magento 2, c’est parce qu’elle voulait offrir une expérience de visite et d’achat meilleure aux visiteurs en s’appuyant sur des technologies faites pour ça.

Avec une navigation optimisée sur mobile et une ergonomie bien plus malléable que ce que permet nativement Magento 2, les sites réalisés avec Front-Commerce corrigent des métriques critiques en e-commerce : taux de rebond, taux de transformation, nombre de pages vues. Et ça, c’est directement du chiffre d’affaires en plus à trafic égal pour le e-commerçant !

Terräng

Métriques post-install Front-Commerce sur mobile :

  • +62% de CA
  • +16% de taux de conversion
  • +16% de trafic
  • Chute du taux de rebond à 46% (43% sur desktop)

Chaîne Thermale du Soleil

Métriques post-install Front-Commerce :

  • +87% de CA
  • +48% de taux de conversion
  • +25% de trafic
  • Taux de rebond : 30% (identique entre desktop et mobile)

SEO

Avec Front-Commerce, le site devient une « PWA » (Progressive Web App), un référentiel qui offre aux visiteurs une expérience similaire à l’utilisation d’une application native (sans devoir télécharger et installer une app). Le principal avantage est d’offrir aux utilisateurs un raccourci (comme pour une app) qui permettra ensuite de lancer le site en plein écran. C’est particulièrement utile pour les boutiques qui génèrent des achats réguliers ou récurrents, la présence du raccourci chez le client favorisant le retour sur la boutique.

Outre ce « buzzword » PWA qui a fait beaucoup parlé mais qui finalement n’est pas si important que ça, la technologie qui compose Front-Commerce pour la navigation sur le site est en revanche primordiale. Les performances s’améliorent au fur et à mesure des nouvelles versions, c’est indéniable.

Avec une ergonomie fluide et des pages qui chargent vite, les statistiques de visites évoluent immédiatement : plus de pages vues, durée de session qui augmente et plus de ventes. Des indicateurs pris en compte par Google pour noter la qualité d’un site et donc optimiser son classement.

Il est utile d’ajouter que Front-Commerce récupère les clés d’url depuis Magento (donc rien ne bouge à ce niveau-là en cas de migration), que le thème par défaut est doté de toutes les fonctionnalités SEO attendues (micro-data incluses) et que les pages sont générées (en SSR) à la volée lorsque les moteurs de recherche crawlent un site.

« One more thing »

L’ajout récent d’un CDN dans l’offre Front-Commerce Cloud permet de multiplier les effets par des performances vraiment « éclair », jugez plutôt :

https://www.juliusk9.fr/fr/

https://www.lilinappy.fr/

Pour les développeurs, un gain faramineux

La force de Front-Commerce est d’utiliser des technologies récentes et non spécialisées, c’est-à-dire que certaines agences, comme nous, les utilisent également sur d’autres types de projets. Je parle notamment de React et GraphQL. Aussi l’utilisation de Front-Commerce ne nécessite pas de longue formation spécialisée et permet de recruter plus facilement des profils rapidement opérationnels.

Front-Commerce fournit un thème prêt à l’emploi avec toutes les fonctionnalités supportées. En libérant les développeurs des contraintes imposées par le moteur e-commerce, Front-Commerce permet une plus grande latitude dans l’ergonomie des écrans, notamment sur le tunnel d’achat, et accélère grandement l’intégration du thème de la boutique.

Outre une documentation complète, il est également très plaisant de pouvoir compter sur le support de Front-Commerce, très réactif lorsque l’on rencontre des problèmes. Si nécessaire, les correctifs sont publiés en quelques jours, voire parfois dans la journée. Quel avantage de parler la même langue et de travailler aux mêmes horaires ! C’est la garantie de ne pas perdre de temps sur un projet et de ne pas découvrir en cours de route que certaines fonctionnalités seront à développer nous-mêmes. En effet, Front-Commerce promet une couverture complète de toutes les fonctionnalités natives de Magento 2. De plus, l’éditeur fournit également des modules prêts à l’emploi pour des moyens de paiement et de livraison communément utilisés, ainsi que certains CMS et autres services souvent présents (avis vérifiés, etc..).

De ces avantages, nous tirons un important bénéfice en termes de temps de réalisation, qui nous permet de rester au même tarif que pour une intégration sans Front-Commerce, avec une équipe de développeurs sécurisée par la présence active de l’éditeur.

Des évolutions régulières

La cadence de livraison des versions de Front-Commerce est toutes les 6 semaines. Chaque version amène son flot de nouveautés, certaines plus importantes que d’autres mais on sent que le produit avance régulièrement.

Nous pouvons ainsi compter sur eux pour le support des dernières versions de Magento 2 et proposer aux clients de nouvelles fonctionnalités (le Page Builder de Magento par exemple au moment d’écrire cet article).

Les montées en version sont bien documentées via un changelog qui permet de faire attention à chaque point du cœur impacté.

La responsabilité du frontend gérée de bout en bout

En architecture découplée, le frontend est l’application critique de la boutique, le point d’entrée et aussi comme on l’a vu le connecteur entre les différents services.

On ressent dans la posture de Front-Commerce qu’ils endossent très bien la responsabilité qui repose sur leur produit. Afin d’en maîtriser toute la chaîne d’utilisation, la licence inclut un hébergement cloud qui gère les pics de charge. C’est plutôt rassurant et c’est aussi un point d’inquiétude en moins pour nous, souvent obligés de surveiller et d’intervenir sur la partie hosting !

Depuis le début d’année, la licence s’est enrichie du service CDN assuré s’il-vous-plaît par un poids lourd du marché : AKAMAI ! Avec la mise en page des fichiers HTML et des requêtes GraphQL, la vitesse a encore pris une claque, et la capacité à absorber les pics de charge est démultipliée.

Compatibilité avec d’autres moteurs e-commerce

Si nous avons utilisé Front-Commerce uniquement avec Magento 1 et 2 pour le moment, c’est toutefois une solution agnostique (qui n’est pas liée à une solution particulière) : elle supporte également Adobe Commerce (la version « enterprise » de Magento 2 avec des fonctionnalités B2B), OroCommerce (open-source et enterprise), Proximis et BigCommerce.

Pour les agences qui utilisent plusieurs de ces solutions, c’est un atout car il y aura moins d’effort de formation sur chaque solution côté frontend (même techno pour le front), et elles pourront proposer à leurs clients des migrations d’une solution à l’autre avec une grande souplesse.

Pour notre part, les choix faits par Front-Commerce sont des signaux importants sur les éventuelles futures plateformes que nous pourrions ajouter à nos compétences.

Le coût

L’utilisation de Front-Commerce est soumise à une licence commerciale, incluant les mises à jour, le support et l’hébergement + CDN.

C’est un abonnement annuel qui débute à 12 000 € HT et qui augmente en fonction du trafic et du CA du client (hébergement et CDN inclus obligent). Nous, en tant qu’agence, ne faisons que la mise en relation, c’est Front-Commerce qui contractualise avec le client.

Commercialement, il n’est pas aisé de « vendre » à un client une licence, surtout récurrente, dans un univers dominé par l’open-source. Cependant à y regarder de plus près, il n’est pas si difficile de valoriser cet investissement :

  • les gains obtenus par la solution sur le chiffre d’affaires rentabilisent le coût de la licence
  • les e-commerçants utilisent en abondance d’autres services à abonnement : versions « enterprise » des moteurs e-commerce, solutions de paiement, emailing, CRM, hébergement, avis clients,… ce n’est donc pas une exception. Même les éditeurs d’extensions passent à l’abonnement (Amasty)
  • à intégration égale, l’usage de Front-Commerce économise du temps, donc de l’argent
  • le coût intègre l’hébergement avec des garanties, ce qui doit mécaniquement réduire le coût d’hébergement du moteur e-commerce, il faut bien penser à le déduire des coûts globaux !

La concurrence

Honnêtement, notre agence est trop petite pour utiliser plusieurs outils qui ont la même fonction. Comme sur d’autres sujets, nous avons fait le choix de partir sur Front-Commerce, principalement car nous faisions déjà du React et que nous étions rassurés par les garanties apportées par l’éditeur.

Notre perception de la concurrence n’est donc pas basée sur des faits vérifiés en interne, mais sur l’observation de l’écosystème et des retours officiels d’autres agences.

Le principal concurrent de Front-Commerce est open-source. Il se nomme VueStoreFront (VSF).

Ce que l’on voit :

  • VueJS n’est pas une techno que nous utilisons en interne
  • la communauté open-source de VSF permet d’avancer très rapidement, notamment sur la compatibilité avec plusieurs solutions e-commerce ce qui est un plus pour qui en a besoin
  • les changements de version ont laissé derrière les premiers utilisateurs car pas de compatibilité ascendante (il faut payer pour continuer à avoir du support)
  • Toutes les fonctionnalités ne sont pas supportées, ce qui demande à l’intégrateur un travail supplémentaire.
  • En open-source, s’il manque quelque chose ou qu’il y a un bug et qu’on est pressé, il faut le faire soi-même

Chaque agence, chaque personne, défend ardemment les choix qu’elle a fait, parfois à en perdre toute objectivité. Nous ne souhaitons pas y succomber ni déchainer les passions. Malgré les défauts vus ou perçus à nos yeux, il ne faut pas perdre de vue que VSF compte aujourd’hui des centaines de boutiques en production qui fonctionnent, avec des développeurs et des e-commerçants satisfaits. La concurrence reste une manière saine de faire évoluer un marché.

De par notre appétence pour React et le support de l’éditeur qui nous garantit la stabilité et le support fonctionnel dont nous avons besoin, notre choix reste tout à fait pertinent. Notre travail est efficace, sans mauvaise surprise et les résultats sont très positifs sur les boutiques ainsi équipées.

Pour conclure, pour le e-commerçant

Le couple Magento 2 + Front-Commerce permet de concevoir une boutique basée sur un moteur robuste et très fonctionnel, tout en proposant aux visiteurs une expérience rapide et ergonomique. Son architecture découplée rend l’ensemble facilement évolutif. Il pourra ainsi choisir pour chaque service celui le plus adapté à ses besoins à un instant T.

C’est tout simplement la manière la plus efficiente et pérenne de concevoir sa boutique aujourd’hui, si tant est que son volume d’affaire le justifie bien entendu.

Les gains se répartissent entre le chiffre d’affaires supplémentaire obtenu par l’expérience client améliorée, et par le coût total de fonctionnement (TCO) optimisé.

La présence de l’éditeur tout au long de la vie du projet est un vrai gage de qualité et d’évolution.

Les performances de navigation sont garanties, y compris pendant les pics (soldes, black friday, newsletters, etc…).

Les évolutions régulières sont une source d’inspiration pragmatique de nouveaux services à utiliser sur sa boutique.

Pour conclure, pour nous intégrateur

Nous aimons :

  • proposer à nos clients une solution innovante et pérenne qui nous distingue
  • … et qui amène aussi de nouveaux prospects intéressés par l’approche
  • la qualité du code
  • la qualité et la réactivité du support
  • harmonisation des compétences frontend sur les projets
  • les évolutions régulières
  • la responsabilité incluse de l’hébergement
  • la simplification d’architecture
  • les résultats obtenus chez nos clients, finalement le plus important

Nous aimons moins :

  • le fait de devoir vendre une licence récurrente à nos clients (ne passe pas à chaque fois)
  • l’utilisation d’extension ou de développements sur mesure nécessite un peu de travail supplémentaire (création points API, adaptations vues).